<template>
    <div class="inventorymanage">
        <el-card class="box-card">
            <el-input class="w200" v-model="proName" placeholder="根据商品名称搜索"></el-input>
            <el-button class="w100" type="primary" @click="clear">清空</el-button>
            <el-button class="w100" type="primary" @click="searchPro">搜索</el-button>

            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号" align="center"> </el-table-column>
                <el-table-column prop="thumbnail" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <img class="wh100" :src="scope.row.thumbnail" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align="center"> </el-table-column>
                <el-table-column prop="standardName" label="规格名称" align="center"> </el-table-column>
                <el-table-column prop="count" label="数量" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="large" @click="inPro(scope.row)">入库</el-button>
                        <el-button type="primary" size="large" @click="outPro(scope.row)">出库</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pagenum"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
        <!-- 入库面板 -->
        <el-dialog title="商品入库" :visible.sync="inPropVisible" width="30%" v-dialogDrag :before-close="handle">
            <el-form ref="form" :model="inProNum" label-width="80px">
                <el-form-item label="入库数量">
                    <el-input class="w100" v-model="inProNum.number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="inPropVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 商品出库 -->
        <el-dialog title="商品出库" :visible.sync="outProVisible" width="30%" v-dialogDrag @close="dialogOut">
            <el-form ref="form" :model="outProNum" label-width="80px">
                <el-form-item label="出库数量">
                    <el-input class="w100" v-model="outProNum.number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="outProVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmOut">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getInventoryList, instocks, searchPro, outPro } from '@/api/Repertory.js'
export default {
  name: 'inventorymanage',
  data () {
    return {
      form: {},
      tableData: [],
      total: 0,
      goodsId: null,
      query: {
        pagesize: 20,
        pagenum: 1
      },
      roleId: null,
      inPropVisible: false,
      proName: '',
      outProNum: {
        number: 0
      },
      inProNum: {
        number: 0
      },
      outProVisible: false
    }
  },
  created () {
    this.getInventoryList()
  },
  mounted () {

  },
  methods: {
    // 获取库存列表
    async getInventoryList () {
      const { Data } = await getInventoryList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        name: null
      })
      this.total = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data)
    },

    // 监听页面每页条数发生变化
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getInventoryList()
    },

    // 监听页面每页发生变化
    handleCurrentChange (newPage) {
      this.query.pagenum = newPage
      this.getInventoryList()
    },

    // 入库
    inPro (role) {
      this.roleId = role.id
      this.inPropVisible = true
    },

    async confirmAdd () {
      const data = await instocks({
        id: this.roleId,
        count: this.inProNum.number
      })
      // if (data.Message !== '') return this.$message.error('添加库存失败')
      // this.$message.success('添加库存成功')
      this.inProNum.number = null
      this.inPropVisible = false
      this.getInventoryList()
      console.log(data)
    },

    // 关闭添加商品面板
    handle () {
      this.inProNum.number = ''
      this.inPropVisible = false
    },

    // 出库
    outPro (role) {
      this.goodsId = role.id
      this.outProVisible = true
    },

    // 确认出库
    async confirmOut () {
      const data = await outPro({
        id: this.goodsId,
        count: this.outProNum.number
      })
      if (data.RequestStatus !== 200) return this.$message.error('出库失败')
      this.$message.success('出库成功')
      this.outProNum.number = null
      this.outProVisible = false
      this.getInventoryList()
      console.log(data)
    },

    dialogOut () {
      this.outProNum.number = null
    },
    // 清空搜索
    clear () {
      this.proName = ''
      this.getInventoryList()
    },

    // 根据商品名称搜索
    async searchPro () {
      const { Data } = await searchPro({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        name: this.proName
      })
      this.tableData = Data.list
      this.total = Data.paging.totalItemCount
      console.log(Data)
    }
  }
}
</script>

<style scoped>
.w200 {
    width: 200px;
    margin-right: 30px;
}
.w100 {
    width: 100px;
}
.el-table {
    margin-top: 10px;
}

.wh100 {
    width: 100px;
    height: 100px;
}
</style>
